<template>
	<view class="p20" style="background-color: #f8f8f8;">
		<view class="header dis_f aic">
			<view class="fs28 ">
				输入信息
			</view>
			<image src="../../static/images/zm_steps_n.png" mode="aspectFill" class="imgtop"></image>
			<view class="fs28" style="color: #000;">
				提交订单
			</view>
			<image src="../../static/images/zm_steps.png" mode="aspectFill" class="imgtop"></image>
			<view class="fs28">
				生成报告
			</view>
		</view>
		<view class="form dis_f aic juc fdc">
			<view class="fs28 mt30">
				支付金额
			</view>
			<view class="dis_f  cred mt30 mb30" style="align-items:baseline;">
				<view class="fs34 fwb">
					¥
				</view>
				<view style="font-size: 70rpx;">
					{{shuomtext.cos3.price}}
				</view>
			</view>
		</view>
		<view class="dis_f juc fs24 c9 mt20">
			报告有效期30天
		</view>
		<view class="dis_f aic jub form" @click="quehu(1)">
			<view class="dis_f aic">
				<image src="../../static/images/alipay.png" mode="aspectFill" class="wieximg"></image>
				<text class="fs26">支付宝</text>
			</view>
			<image src="../../static/images/x1.png" mode="aspectFill" class="qud" v-if="!zfbcheckbox"></image>
			<image src="../../static/images/2x.png" mode="aspectFill" class="qud" v-if="zfbcheckbox"></image>
		</view>
		<!-- <view class="dis_f aic jub form" @click="quehu(2)">
			<view class="dis_f aic">
				<image src="../../static/images/wechat.png" mode="aspectFill" class="wieximg"></image>
				<text class="fs26">微信</text>
			</view>
			<image src="../../static/images/x1.png" mode="aspectFill" class="qud" v-if="!wxcheckbox"></image>
			<image src="../../static/images/2x.png" mode="aspectFill" class="qud" v-if="wxcheckbox"></image>
		</view> -->
		<view class="chaklan dis_f aic juc" @click="jiancecli">
			立即支付
		</view>
		<view class="content">
			<view class="title">
				报告内容多元化
			</view>
			<view class="dis_f fww jub mt20">
				<view class="lis dis_f aic juc" v-for="(item,index) in shuomtext.cos2" :key="index">
					<image src="../../static/images/jaint.png" class="jiant"></image>
					<view class="s28 ml10">
						{{item}}
					</view>
				</view>
			</view>
			<view class="dis_f aic juc mt40 fs30">
				持续为您提供更多权威信息
			</view>
		</view>
		<view class="content">
			<view class="title">
				我们的优势
			</view>
			<view class="dis_f  mt20 table" v-for="(item,index) in  shuomtext.cos1" :key="index">
				<image :src="item.img" mode="aspectFill" class="shujuimg"></image>
				<view class="">
					<view class="fs30">
						{{item.title}}
					</view>
					<view class="fs26 c9 mt10">
						{{item.remark}}
					</view>
				</view>
			</view>


		</view>
	</view>
</template>
 <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>
<script>
	export default {
		data() {
			return {
				zfbcheckbox: true,
				wxcheckbox: false,

				id: '',
				shuomtext: ""
			}
		},
		onLoad(option) {
			this.id = option.id
			this.poatlist()
		},
		onShow() {
			this.postindex()
		},
		methods: {
			postindex() {
				this.api.post('service/orderDetails', {
					id: this.id
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						if (res.data.status == 1) {
							uni.redirectTo({
								url: '/pages/index/index?id=' + this.id
							})
						}
					}
				})
			},
			poatlist() {
				this.api.post('login/getConfig', {
					type: 999,
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.shuomtext = res.data
					}
				})
			},
			jiancecli() {
				if (this.zfbcheckbox) {
					var hostname = window.location.hostname
					console.log(hostname)
					window.location.href = this.api.ip + 'login/orderAliPay?id=' + this.id + '&admin=' + hostname
				}
				if (this.wxcheckbox) {
					this.api.post('login/payOtherOrder', {
						id: this.id,
					}).then(res => {
						console.log(res);
						if (res.code == 200) {
						}
					})
				}
				// uni.redirectTo({
				// 	url: '/pages/index/index'
				// })
			},
			quehu(index) {

				if (index == 1) {
					this.wxcheckbox = false
					this.zfbcheckbox = true
				}
				if (index == 2) {
					this.wxcheckbox = true
					this.zfbcheckbox = false
				}
			},
			chakna() {
				uni.navigateTo({
					url: '/pages/detection/detection'
				})
			}
		}
	}
</script>

<style>
	.table {
		margin-bottom: 16rpx;
		width: 92%;
		margin-left: 30rpx;
		height: 130rpx;
		background-color: #f5f5f5;
		border-radius: 5px;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.shujuimg {
		height: 88rpx;
		width: 88rpx;
		margin-right: 30rpx;
	}

	.lis {
		width: 33.33%;
		margin-top: 20rpx;

	}

	.title {
		color: #b50019;
		background-color: #f9e9ec;
		width: 400rpx;
		height: 75rpx;
		line-height: 75rpx;
		background-color: #f9e9ec;
		border-radius: 0 0 5px 5px;
		margin: auto;
		color: #b50019;
		text-align: center;
	}

	.content {
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		margin: 35rpx auto;
		padding-bottom: 30rpx;
	}

	.chaklan {
		margin: 10rpx auto 44rpx;
		line-height: 88rpx;
		width: 95%;
		height: 88rpx;
		background: #b50019;
		color: #fff;
		border-radius: 60rpx;
		margin-top: 40rpx;
		font-size: 32rpx;
	}

	.jiant {
		width: 35rpx;
		height: 35rpx;
	}

	.qud {
		width: 30rpx;
		height: 30rpx;
	}

	.wieximg {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.form {
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx 40rpx 20rpx;
		font-size: 30rpx;
		color: #333;
		box-sizing: border-box;
	}

	.imgtop {
		width: 60rpx;
		height: 35rpx;
	}

	.header {
		height: 100rpx;
		width: 100%;
		color: #999;
		font-size: 30rpx;
		padding: 0 35rpx;
		background-color: #fff;
		align-items: center;
		justify-content: space-between;
		background-color: rgba(207, 37, 0, .1);
		box-sizing: border-box;
	}
</style>